import {ref} from 'vue'
import {defineStore} from 'pinia'

const useThemeStore = defineStore('theme', () => {
  const isDark = ref(false)

  const storageKey = 'ai-client-dark'

  const changeHtmlDark = () => {
    const html = document.getElementById('html')
    if (isDark.value) {
      html.className = 'dark'
    } else {
      html.className = ''
    }
  }

  const setDefaultDark = () => {
    const storageDark = localStorage.getItem(storageKey)
    isDark.value = storageDark === '1'
    changeHtmlDark()
  }

  const toggleDark = () => {
    localStorage.setItem(storageKey, isDark.value ? '0' : '1')
    isDark.value = !isDark.value
    changeHtmlDark()
  }

  setDefaultDark()

  return {isDark, toggleDark}
})

export default useThemeStore